import QtQuick 2.3
import "qrc:///content"
import "qrc:///Constants.js" as Constants

Rectangle
{
    // Identifier of the item
    id: register

    // common properties

    //
    anchors.fill: parent
    color: Constants.backgroundColor

    // Testing purpose (Design)
    width: 500
    height: 500

    // Font from resources
    FontLoader { id: titleFont; source: "qrc:///font/Ubuntu-Title.ttf" }
    // FontLoader { id: titleBoldFont; source: "qrc:///font/Ubuntu-Titling-Bold.ttf" }

    // caption
    Caption
    {
        id: caption
        label: "Whandgo"
    }

    // logo image
    Image
    {
        id: logoImage
        width: 125
        height: 125
        anchors.bottom: titleLabel.top
        anchors.bottomMargin: -10
        anchors.horizontalCenter: parent.horizontalCenter
        source: "qrc:///images/logo.png"

        /* fadeIn */
        NumberAnimation on opacity
        {
            id: fadeInAnimation
            from: 0
            to: 1
            duration: 2000
        }

        Component.onCompleted: fadeInAnimation.start()
    }

    // title
    Text
    {
        id: titleLabel
        anchors.centerIn: parent
        text: "whandgo"
        color: Constants.titleBackgroundColor
        font.pointSize: Constants.titleFontSize
        font.family: titleFont.name
    }

    // description
    Text
    {
        id: enjoyLabel
        text: "just enjoy"
        anchors.top: titleLabel.bottom
        anchors.topMargin: -10
        anchors.horizontalCenter: parent.horizontalCenter
        color: Constants.titleBackgroundColor
        font.pointSize: Constants.titleFontSize / 4
        font.family: titleFont.name
    }

    // Login with facebook button
    Button
    {
        id: signFacebookButton
        activeFocusOnTab: true
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 60
        label: "Sign in with Facebook"
        buttonImage: "qrc:///images/facebook.png"
        onClicked: parent.signInFacebookClicked()
    }

    // Join button
    Button
    {
        id: joinButton
        label: "Join"
        buttonImage: "qrc:///images/user.png"
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 15
        buttonWidth: (parent.width / 2) - 20
        onClicked: parent.joinClicked()
    }

    // Sign button
    Button
    {
        id: signButton
        label: "Sign in"
        buttonImage: "qrc:///images/sign.png"
        anchors.right: parent.right
        anchors.rightMargin: 15
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 15
        buttonWidth: (parent.width / 2) - 20
        onClicked: parent.signInClicked()
    }

    // signals
    signal signInFacebookClicked()
    onSignInFacebookClicked: { console.log("Sign in with Facebook") }

    signal joinClicked()
    onJoinClicked: { console.log("Join new user") }

    signal signInClicked()
    onSignInClicked: { console.log("Sign in") }

    // functions
    function showView(show)
    {
        register.state = show? "" : "hide"
        signFacebookButton.disabled = !show
        joinButton.disabled = !show
        signButton.disabled = !show
    }

    // states
    states:
    [
    State
    {
        name: "hide"
        PropertyChanges
        {
            target: register
            opacity: 0.0
        }
    }
    ]

    // transitions
    transitions: Transition
    {
        NumberAnimation
        {
            properties: "opacity"
            duration: 500
        }
    }
}
